import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {Ionicons} from '@expo/vector-icons';
import {LinearGradient} from 'expo-linear-gradient';
import {useNavigation} from '@react-navigation/native';
import {Colors} from '../constants/colors';
import AppHeader from '../components/AppHeader';

export default function RoleSelectScreen() {
	const nav = useNavigation<any>();
	const [role, setRole] = useState<'instructor' | 'merchant'>('instructor');

	const Card = ({
					  selected,
					  title,
					  sub,
					  onPress,
				  }: {
		selected: boolean;
		title: string;
		sub: string;
		onPress: () => void;
	}) => (
		<TouchableOpacity activeOpacity={0.9} onPress={onPress}>
			{selected ? (
				<LinearGradient colors={[Colors.gradientStart, Colors.gradientEnd]} style={styles.cardSel}>
					<Text style={styles.cardSelTitle}>{title}</Text>
					<Text style={styles.cardSelSub}>{sub}</Text>
					<View style={styles.checkWrap}>
						<Ionicons name="checkmark-circle" size={24} color={Colors.white}/>
					</View>
				</LinearGradient>
			) : (
				<View style={styles.cardPlain}>
					<Text style={styles.cardPlainTitle}>{title}</Text>
					<Text style={styles.cardPlainSub}>{sub}</Text>
				</View>
			)}
		</TouchableOpacity>
	);

	const handleEnter = () => {
		if (role === 'instructor') {
			nav.reset({
				index: 0,
				routes: [{name: 'InstructorRegister'}],
			});
		} else {
			nav.reset({
				index: 0,
				routes: [{name: 'MerchantRegister'}],
			});
		}
	};

	const goAiPage = () => {
		nav.reset({
			index: 0,
			routes: [{name: 'MainTabs'}],
		});
		
	}

	return (
		<SafeAreaView style={styles.container}>
			<AppHeader title="身份選擇" showBack/>
			<View style={styles.content}>
				<View style={styles.contentHead}>
					<Text style={styles.appTitle}>健營達人</Text>
					<TouchableOpacity activeOpacity={0.9} onPress={goAiPage}>
						<Image
							source={require('../../assets/ai.png')}
						/>
					</TouchableOpacity>
				</View>
				<View style={styles.heroRow}>
					<View style={{flex: 1}}>
						<Text style={styles.heroTitle}>選擇你的身份</Text>
						<Text style={styles.heroSub}>以幫助我們更精準為你服務</Text>
					</View>
					<Image
						source={{uri: 'https://images.unsplash.com/photo-1605296866985-34ba3c0b5277?q=80&w=300&auto=format&fit=crop'}}
						style={{width: 88, height: 88, borderRadius: 20}}
					/>
				</View>

				<Card
					selected={role === 'instructor'}
					title="導師註冊"
					sub="管理自己的課程更方便"
					onPress={() => setRole('instructor')}
				/>

				<Card
					selected={role === 'merchant'}
					title="商家註冊"
					sub="添加導師更好管理"
					onPress={() => setRole('merchant')}
				/>

				<TouchableOpacity activeOpacity={0.9} style={styles.cta} onPress={handleEnter}>
					<Text style={styles.ctaText}>立即進入</Text>
				</TouchableOpacity>
			</View>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	container: {flex: 1, backgroundColor: Colors.white},
	content: {padding: 20},
	contentHead: {
		display: 'flex',
		flexDirection: "row",
		justifyContent: 'space-between',
		alignItems: 'center',
		flexWrap: 'nowrap',
	},
	appTitle: {fontSize: 22, fontWeight: '800', textAlign: 'center', marginTop: 4, marginBottom: 16},
	heroRow: {flexDirection: 'row', alignItems: 'center', marginBottom: 16},
	heroTitle: {fontSize: 22, fontWeight: '800', color: Colors.black, marginBottom: 8},
	heroSub: {color: Colors.primary, opacity: 0.9},

	cardSel: {
		backgroundColor: Colors.primary,
		borderRadius: 24,
		paddingVertical: 26,
		paddingHorizontal: 20,
		marginTop: 8,
		overflow: 'hidden',
	},
	cardSelTitle: {color: Colors.white, fontSize: 20, fontWeight: '800', marginBottom: 6, textAlign: 'center'},
	cardSelSub: {color: 'rgba(255,255,255,0.9)', textAlign: 'center'},
	checkWrap: {position: 'absolute', right: 20, bottom: 20},

	cardPlain: {
		backgroundColor: Colors.white,
		borderRadius: 24,
		paddingVertical: 26,
		paddingHorizontal: 20,
		marginTop: 16,
		borderWidth: 1,
		borderColor: Colors.gray[200],
		shadowColor: Colors.black,
		shadowOpacity: 0.04,
		shadowRadius: 6,
		shadowOffset: {width: 0, height: 2},
	},
	cardPlainTitle: {color: Colors.black, fontSize: 20, fontWeight: '800', textAlign: 'center', marginBottom: 6},
	cardPlainSub: {color: Colors.gray[400], textAlign: 'center'},

	cta: {
		height: 56,
		backgroundColor: Colors.primary,
		borderRadius: 12,
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: 28,
	},
	ctaText: {color: Colors.white, fontSize: 18, fontWeight: '800'},
});

